<html>
<script>

var allChanges = "";

function changeColor(id) { 
	var current_color = id.style.backgroundColor;
	if (current_color == "rgb(162, 237, 177)")
	{
		id.style.backgroundColor="#ffffff";
    	//id.innerHTML = id.id + "";
	}    	
	else 
	{
		id.style.backgroundColor="#a2edb1";
		//id.innerHTML = id.id + "";
		allChanges = allChanges + "|" + id.id;
	}

}
function sendPostRequest() {
		var request = new XMLHttpRequest();	
		request.open("POST","/main",true);
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//allCoursesChanged = "Engineering Analysis";
		request.send(allChanges);
}

</script>
<link href="../static/starter-template.css" rel="stylesheet">
<div class="CSSTableGenerator">
	<div class="wrapper">
		<button type = "button" onclick="sendPostRequest()">Save ALL Changes</button>
	</div>
	<br>
	<table border="1" >
	<tr>
		<td><pre>Freshman  1</pre></td>
		<td><pre>Freshman  2</pre></td>
		<td><pre>Sophomore 1</pre></td>
		<td><pre>Sophomore 2</pre></td>
		<td><pre>Junior    1</pre></td>
		<td><pre>Junior    2</pre></td>
		<td><pre>Senior    1</pre></td>
		<td><pre>Senior    2</pre></td>
	</tr>
	<tr>
		<td onclick="changeColor(this)" id = "Engineering Analysis" {{classTaken.1}}>{{courseNames.1}} <br><br> {{courseId.1}} <br><br> {{courseCredits.1}} Credits</td>
		<td onclick="changeColor(this)" id = "Engineering Computing" {{classTaken.6}}>{{courseNames.6}} <br><br> {{courseId.6}} <br><br> {{courseCredits.6}} Credits</td>
		<td onclick="changeColor(this)"id = "Digital Logic" {{classTaken.11}}>{{courseNames.11}} <br><br> {{courseId.11}} <br><br> {{courseCredits.11}} Credits</td>
		<td onclick="changeColor(this)" id = "Computer Organization" {{classTaken.16}}>{{courseNames.16}} <br><br> {{courseId.16}} <br><br> {{courseCredits.16}} Credits</td>
		<td onclick="changeColor(this)" id = "Systems Software" {{classTaken.21}}>{{courseNames.21}} <br><br> {{courseId.21}} <br><br> {{courseCredits.21}} Credits</td>
		<td onclick="changeColor(this)" id = "Computer Architecture" {{classTaken.26}}>{{courseNames.26}} <br><br> {{courseId.26}} <br><br> {{courseCredits.26}} Credits</td>
		<td onclick="changeColor(this)" id = "Technical Elective 2" {{classTaken.31}}>{{courseNames.31}} <br><br> {{courseId.31}} <br><br> {{courseCredits.31}} Credits</td>
		<td onclick="changeColor(this)" id = "COE Design Elective" {{classTaken.36}}>{{courseNames.36}} <br><br> {{courseId.36}} <br><br> {{courseCredits.36}} Credits</td>
	</tr>
	<tr>
		<td onclick="changeColor(this)" id = "Physics 1" {{classTaken.2}}>{{courseNames.2}} <br><br> {{courseId.2}} <br><br> {{courseCredits.2}} Credits</td>
		<td onclick="changeColor(this)" id = "Physics 2" {{classTaken.7}}>{{courseNames.7}} <br><br> {{courseId.7}} <br><br> {{courseCredits.7}} Credits</td>
		<td onclick="changeColor(this)" id ="Differential Equations" {{classTaken.12}}>{{courseNames.12}} <br><br> {{courseId.12}} <br><br> {{courseCredits.12}} Credits</td>
		<td onclick="changeColor(this)" id = "Data Structures" {{classTaken.17}}>{{courseNames.17}} <br><br> {{courseId.17}} <br><br> {{courseCredits.17}} Credits</td>
		<td onclick="changeColor(this)" id = "Probability and Statistics" {{classTaken.22}}>{{courseNames.22}} <br><br> {{courseId.22}} <br><br> {{courseCredits.22}} Credits</td>
		<td onclick="changeColor(this)" id = "Technical Elective 1" {{classTaken.27}}>{{courseNames.27}} <br><br> {{courseId.27}} <br><br> {{courseCredits.27}} Credits</td>
		<td onclick="changeColor(this)" id = "Software Engineering" {{classTaken.32}}>{{courseNames.32}} <br><br> {{courseId.32}} <br><br> {{courseCredits.32}} Credits</td>
		<td onclick="changeColor(this)" id = "Technical Elective 3" {{classTaken.37}}>{{courseNames.37}} <br><br> {{courseId.37}} <br><br> {{courseCredits.37}} Credits</td>
	</tr>
	<tr>
		<td onclick="changeColor(this)" id = "Chemistry 1" {{classTaken.3}}>{{courseNames.3}} <br><br> {{courseId.3}} <br><br> {{courseCredits.3}} Credits</td>
		<td onclick="changeColor(this)" id ="Chemistry 2" {{classTaken.8}}>{{courseNames.8}} <br><br> {{courseId.8}} <br><br> {{courseCredits.8}} Credits</td>
		<td onclick="changeColor(this)" id = "Introduction to JAVA" {{classTaken.13}}>{{courseNames.13}} <br><br> {{courseId.13}} <br><br> {{courseCredits.13}} Credits</td>
		<td onclick="changeColor(this)" id = "Digital Laboratory" {{classTaken.18}}>{{courseNames.18}} <br><br> {{courseId.18}} <br><br> {{courseCredits.18}} Credits</td>
		<td onclick="changeColor(this)"id = "Algorithms" {{classTaken.23}}>{{courseNames.23}} <br><br> {{courseId.23}} <br><br> {{courseCredits.23}} Credits</td>
		<td onclick="changeColor(this)" id = "Advanced Digital Design" {{classTaken.28}}>{{courseNames.28}} <br><br> {{courseId.28}} <br><br> {{courseCredits.28}} Credits</td>
		<td onclick="changeColor(this)" id = "COE Advanced Elective 2" {{classTaken.33}}>{{courseNames.33}} <br><br> {{courseId.33}} <br><br> {{courseCredits.33}} Credits</td>
		<td onclick="changeColor(this)" id = "Open Elective 1" {{classTaken.38}}>{{courseNames.38}} <br><br> {{courseId.38}} <br><br> {{courseCredits.38}} Credits</td>
	</tr>
	<tr>
		<td onclick="changeColor(this)" id ="Calculus 1" {{classTaken.4}}>{{courseNames.4}} <br><br> {{courseId.4}} <br><br> {{courseCredits.4}} Credits</td>
		<td onclick="changeColor(this)" id ="Calculus 2" {{classTaken.9}}>{{courseNames.9}} <br><br> {{courseId.9}} <br><br> {{courseCredits.9}} Credits</td>
		<td onclick="changeColor(this)" id = "Linear Systems and Circuits 1" {{classTaken.14}}>{{courseNames.14}} <br><br> {{courseId.14}} <br><br> {{courseCredits.14}} Credits</td>
		<td onclick="changeColor(this)" id = "Linear Systems and Circuits 2" {{classTaken.19}}>{{courseNames.19}} <br><br> {{courseId.19}} <br><br> {{courseCredits.19}} Credits</td>
		<td onclick="changeColor(this)" id = "Linear Algebra" {{classTaken.24}}>{{courseNames.24}} <br><br> {{courseId.24}} <br><br> {{courseCredits.24}} Credits</td>
		<td onclick="changeColor(this)" id = "COE Advanced Elective 1" {{classTaken.29}}>{{courseNames.29}} <br><br> {{courseId.29}} <br><br> {{courseCredits.29}} Credits</td>
		<td onclick="changeColor(this)" id = "COE Advanced Elective 3" {{classTaken.34}}>{{courseNames.34}} <br><br> {{courseId.34}} <br><br> {{courseCredits.34}} Credits</td>
		<td onclick="changeColor(this)" id = "COE Advanced Elective 4" {{classTaken.39}}>{{courseNames.39}} <br><br> {{courseId.39}} <br><br> {{courseCredits.39}} Credits</td>
	</tr>
	<tr>
		<td onclick="changeColor(this)" id = "Humanities/Social Science 1" {{classTaken.5}}>{{courseNames.5}} <br><br> {{courseId.5}} <br><br> {{courseCredits.5}} Credits</td>
		<td onclick="changeColor(this)" id ="Humanities/Social Science 2" {{classTaken.10}}>{{courseNames.10}} <br><br> {{courseId.10}} <br><br> {{courseCredits.10}} Credits</td>
		<td onclick="changeColor(this)" id = "Humanities/Social Science 3" {{classTaken.15}}>{{courseNames.15}} <br><br> {{courseId.15}} <br><br> {{courseCredits.15}} Credits</td>
		<td onclick="changeColor(this)" id = "Communications Skills Elective" {{classTaken.20}}>{{courseNames.20}} <br><br> {{courseId.20}} <br><br> {{courseCredits.20}} Credits</td>
		<td onclick="changeColor(this)" id = "Humanities/Social Science 4" {{classTaken.25}}>{{courseNames.25}} <br><br> {{courseId.25}} <br><br> {{courseCredits.25}} Credits</td>
		<td onclick="changeColor(this)" id = "Humanities/Social Science 5" {{classTaken.30}}>{{courseNames.30}} <br><br> {{courseId.30}} <br><br> {{courseCredits.30}} Credits</td>
		<td onclick="changeColor(this)" id = "Humanities/Social Science 6" {{classTaken.35}}>{{courseNames.35}} <br><br> {{courseId.35}} <br><br> {{courseCredits.35}} Credits</td>
		<td onclick="changeColor(this)" id = "Open Elective 2" {{classTaken.40}}>{{courseNames.40}} <br><br> {{courseId.40}} <br><br> {{courseCredits.40}} Credits</td>
	</tr>
</table>
</div>
<style>
CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:50%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffffff; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #00007f 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00007f), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #00007f 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00007f", endColorstr="#003f7f");	background: -o-linear-gradient(top,#00007f,003f7f);

	background-color:#00007f;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:30px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #00007f 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00007f), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #00007f 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00007f", endColorstr="#003f7f");	background: -o-linear-gradient(top,#00007f,003f7f);

	background-color:#00007f;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
</style>
</html>
 
           
